<template>
  <div id="app">
    <router-view v-if="this.$router.currentRoute.path === '/oauth' ||
                       this.$router.currentRoute.path === '/Oauth'" name="oauth"/>
    <el-container v-else>
      <!--头部-->
      <el-header class="header">
        <div class="logo">
          <router-link to="/">
            <el-image :src="require('@/assets/images/logo.png')" />
          </router-link>
        </div>
        <!--导航栏 -->
        <div class="navigation">
          <el-menu
            :default-active="this.activeIndex"
            class="el-menu-navigation"
            mode="horizontal"
            @select="openPage"
            :router="true">
            <el-menu-item index="/">
              首页
            </el-menu-item>
            <el-menu-item index="/eventAndNews">
              活动及品牌新闻
            </el-menu-item>
            <el-menu-item index="/brand">
              品牌介绍
            </el-menu-item>
            <el-menu-item index="/hot">
              热销商品
            </el-menu-item>
<!--            <el-menu-item index="/picture">-->
<!--              照片墙-->
<!--            </el-menu-item>-->
            <el-menu-item index="/shopList">
              店铺一览
            </el-menu-item>
            <el-menu-item index="/blog">
              微博-微信
            </el-menu-item>
            <el-menu-item v-if="(typeof this.$store.state.user === 'object')" index="/user">
              用户中心
            </el-menu-item>
            <el-menu-item v-else index="/login">
              登录/注册
            </el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <!--主内容-->
      <el-main class="main">
        <router-view/>
        <el-backtop :bottom="150">
        </el-backtop>
      </el-main>
      <!--底部-->
      <el-footer>
        <Footer/>
      </el-footer>
    </el-container>

  </div>
</template>

<script lang="js">
import Footer from './components/Footer'
import { getUser } from '@/api'

export default {
  data () {
    return {
      activeIndex: '/'
    }
  },
  components: {
    Footer
  },
  methods: {
    openPage (path) {
      this.activeIndex = path
      // if (this.$router.currentRoute.path === this.$route.path) {
      //   return
      // }
      // this.$router.push({ path: path })
      // console.log(this.$store.state.user)
    },
    getUser () {
      // 获取到用户信息（是否登录了）
      getUser().then(({ data }) => {
        this.$store.state.user = data.data
        sessionStorage.setItem('store', JSON.stringify(this.$store.state))
      }).catch((res) => {
        console.log(res)
      })
    }
  },
  created () {
    this.getUser()
    this.openPage(this.$router.currentRoute.path)
  }
}
</script>

<style lang="less">
html, body {
  padding: 0;
  margin: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .header {
    margin: 0 auto;
    width: 980px;
    height: 83px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    top:0;
    left:50%;
    transform: translateX(-50%);
    background-color: #FFFFFF;
    z-index: 1000;
    .el-image__inner{
      height: 50px;
      width: 91px;
      margin-top: 10px;
    }
    .navigation {
      & > ul {
        li {
          font-weight: bold;
        }
      }
    }
  }

  .main{
    padding: 0;
    padding-top: 83px;
  }
}

</style>
